<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="-html," />










<meta name="description" content="#html基础笔记 ###命名规范 ###HTML是什么？◾超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。">
<meta name="keywords" content="-html">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML基础笔记.md">
<meta property="og:url" content="http://yoursite.com/2018/03/09/HTML基础笔记/index.html">
<meta property="og:site_name" content="陈乾">
<meta property="og:description" content="#html基础笔记 ###命名规范 ###HTML是什么？◾超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1520584805019.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509717789268.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509711818527.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509881745425.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509881680352.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509889324956.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509890321829.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1509890293480.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1510887976987.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1510887886252.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1510902478833.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511101115990.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511173588921.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511173978654.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511174671356.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511271243903.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511271379599.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511266569353.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511267515655.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511442146588.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511442186875.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511443794429.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511443884334.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511526913597.png">
<meta property="og:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1511529464616.png">
<meta property="og:updated_time" content="2018-03-09T12:21:08.438Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML基础笔记.md">
<meta name="twitter:description" content="#html基础笔记 ###命名规范 ###HTML是什么？◾超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。">
<meta name="twitter:image" content="http://yoursite.com/2018/03/09/HTML基础笔记/1520584805019.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/03/09/HTML基础笔记/"/>





  <title>HTML基础笔记.md | 陈乾</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">陈乾</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/03/09/HTML基础笔记/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="陈乾">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="陈乾">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">HTML基础笔记.md</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-03-09T19:52:03+08:00">
                2018-03-09
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/html/" itemprop="url" rel="index">
                    <span itemprop="name">html</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>#html基础笔记</p>
<p>###<a href="http://tguide.qq.com/main/base.htm#css-list01" target="_blank" rel="noopener">命名规范</a></p>
<p>###HTML是什么？<br>◾超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则。<a id="more"></a></p>
<p>###HTML结构<br><img src="./1520584805019.png" alt="Alt text"></p>
<p>◾&lt;!DOCTYPE html&gt; 告诉浏览器使用什么样的html或者xhtml来解析html文档<br>作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。<br>◾<code>&lt;html&gt;&lt;/html&gt;</code>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<code>&lt;head&gt;</code>和主体<code>&lt;body&gt;</code>。<br>◾<code>&lt;head&gt;&lt;/head&gt;</code>元素出现在文档的开头部分。<code>&lt;head&gt;</code>与<code>&lt;/head&gt;</code>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。<br>◾<code>&lt;title&gt;&lt;/title&gt;</code>定义网页标题，在浏览器标题栏显示。<br>◾<code>&lt;body&gt;&lt;/body&gt;</code>之间的文本是可见的网页主体内容</p>
<p>2017.10.30<br>一、div布局基础</p>
<ol>
<li>网页分层：</li>
</ol>
<ul>
<li><strong>表现层  css</strong></li>
<li><strong>结构层  html</strong></li>
<li><strong>行为层  JS</strong></li>
</ul>
<ol>
<li><p><code>meta</code>标签:<br>关键字内容，提供网站相关信息给搜索引擎。<br><strong>常用作</strong>：提高排名，SEO（搜索引擎优化）<br>权重</p>
<ul>
<li><code>&lt;meta&gt;</code>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词</li>
</ul>
</li>
</ol>
<ul>
<li><code>charset</code>字符集编码方式</li>
</ul>
<ol>
<li>常用标签</li>
</ol>
<ul>
<li><code>p</code>标签<br>段落标签！</li>
<li><code>h1-h6</code>标签<br>h1：logo主标题！<br>h2：区块标题！<br>h3-h6依次向下。<br><strong>不要滥用h标签！</strong></li>
</ul>
<hr>
<ul>
<li><code>sub</code>、<code>sup</code>下标上标</li>
<li><code>&lt;br/&gt;</code>换行</li>
<li><code>&lt;hr/&gt;</code>水平线</li>
<li><code>&lt;i&gt;</code>斜体标签（<code>&lt;em&gt;</code>效果相同）</li>
<li><code>&lt;b&gt;</code>粗体文本</li>
<li><code>&lt;strong&gt;</code>加粗<br><code>&lt;strong&gt;</code>标签和<code>&lt;em&gt;</code>标签一样，用于强调文本，但它强调的程度更强一些。<br><strong>不能滥用强调标签！</strong></li>
</ul>
<hr>
<ul>
<li>有序列表：<code>&lt;ol&gt;&lt;li&gt;</code>嵌套</li>
<li>无序列表：<code>&lt;ul&gt;&lt;li&gt;</code>嵌套</li>
<li>常见属性用法：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;ol type=&quot;1&quot; start=&quot;10&quot;&gt;</span><br><span class="line">    &lt;li&gt;asd&lt;/li&gt;</span><br><span class="line">&lt;/ol&gt;      </span><br><span class="line">//以数字为序号的，从10开始的有序列表</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul type=&quot;circle&quot;&gt;</span><br><span class="line">	&lt;li&gt;123&lt;/li&gt;</span><br><span class="line">	&lt;li&gt;11&lt;/li&gt;</span><br><span class="line">	&lt;li&gt;333&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;     </span><br><span class="line">//无序列表（circle空心圆、disc实心圆、square正方块）</span><br></pre></td></tr></table></figure>
<ul>
<li>自定义列表：<code>&lt;dl&gt;&lt;dt&gt;&lt;dd&gt;</code>嵌套使用 <pre><code>-`&lt;dt&gt;`标题
-`&lt;dd&gt;`列表项 
</code></pre></li>
</ul>
<hr>
<ul>
<li><p><code>&lt;img/&gt;</code>图片标签<br>1.<code>src</code>引入图片路径。<br>2.<code>alt</code>替代文本，seo抓取关键字。<br>3.<code>title</code>鼠标悬浮提示文字</p>
</li>
<li><p><code>background</code> 简写属性在一个声明中设置所有的背景属性。<br>可以设置如下属性：</p>
<ul>
<li>background-color             //颜色</li>
<li>background-position        //定位</li>
<li>background-size              //大小</li>
<li>background-repeat          //重复方式</li>
<li>background-origin    </li>
<li>background-clip</li>
<li>background-attachment</li>
<li>background-image          //图片<br><img src="./1509717789268.png" alt="Alt text"></li>
</ul>
</li>
</ul>
<p>★★★★</p>
<ul>
<li><code>background-attachment：fixed</code>图片固定在窗口的固定位置。</li>
</ul>
<hr>
<ul>
<li><code>&lt;a&gt;</code>超链接标签</li>
</ul>
<ol>
<li><code>href</code>属性：<br>(1)填写<strong>域名</strong>跳转链接<br>(2)填写下载或打开<strong>文件</strong>路径<br>(3)填写<code>#</code>代表空链接</li>
<li><code>target</code>属性窗口打开方式：<br>(1)<strong>_self</strong>当前窗口跳转链接<br>(2)<strong>_blank</strong>新窗口跳转链接 </li>
</ol>
<hr>
<ul>
<li><code>&lt;a&gt;</code>做锚点：页面内指定节点跳转！<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=&quot;#head&quot;&gt;点击跳转&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;p id=&quot;head&quot;&gt;第一部分&lt;/p&gt;</span><br><span class="line">&lt;p&gt;第二部分&lt;/p&gt;</span><br><span class="line">&lt;p&gt;第三部分&lt;/p&gt;</span><br><span class="line">&lt;p&gt;第四部分&lt;/p&gt;</span><br><span class="line">//点击即可跳转到第一部分！</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>扩展：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">//锚链接滑动跳转效果</span><br><span class="line">$(&apos;a&apos;).click(function() &#123;</span><br><span class="line">	$(&apos;html, body&apos;).animate(&#123;</span><br><span class="line">	scrollTop: $($.attr(this, &apos;href&apos;)).offset().top</span><br><span class="line">	&#125;, 5000);</span><br><span class="line">	return false;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<hr>
<ul>
<li>css样式引入方式：</li>
</ul>
<ol>
<li>行内样式</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div style=&quot;width:100px;height:200px;&quot;&gt;盒子&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>内嵌式</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> &lt;style&gt;</span><br><span class="line">#a&#123;样式&#125;;</span><br><span class="line">.b&#123;样式&#125;;</span><br><span class="line"> &lt;/style&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>链接式<br>在<code>&lt;head&gt;&lt;/head&gt;</code>内写入：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;</span><br></pre></td></tr></table></figure>
<ol>
<li>导入式（不建议使用）<br>导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;style type=&quot;text/css&quot;&gt;</span><br><span class="line">@(培训)[标签1, 标签2, 标签3];</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ul>
<li>四种CSS引入方式的优先级</li>
</ul>
<ol>
<li>就近原则</li>
<li>理论上：行内&gt;内嵌&gt;链接&gt;导入</li>
<li>实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高</li>
</ol>
<hr>
<ul>
<li>color样式：</li>
</ul>
<ol>
<li>颜色或<code>#xxxxxx</code></li>
<li><code>rgb(x,x,x,x)</code>前三个为三原色掺比<strong>0-255</strong>.最后一个为透明的，<strong>0-1</strong>。</li>
</ol>
<hr>
<ul>
<li>浏览器默认给<code>body</code>加了一个<code>8px</code>的外边距</li>
<li><code>ul、ol</code>列表默认也有边距</li>
<li><code>li</code>默认有缩进</li>
<li>盒子的实际大小：<br>自身高度+内边距+边框</li>
<li>盒子的占位空间：<br>自身高度+内边距+边框+外边距</li>
</ul>
<hr>
<ul>
<li><strong>群组选择器：</strong><br><code>a,div, .box, .top{样式}</code></li>
<li><strong>通配符选择器：</strong>全局选中！<br><code>*{}</code>  配置方便但是影响性能！（页面渲染时要遍历所有标签，大型网站开发不用）</li>
<li><strong>类选择器：</strong><code>class</code></li>
<li><strong>后代选择器：</strong><code>#box p</code></li>
</ul>
<hr>
<ul>
<li><code>display</code>显示<br>1.<code>block</code>块级元素！<br>独占一行，可设置宽高。<br>没有设置宽高时，继承父级宽高。<br>可容纳其他块级元素和行内元素。</li>
</ul>
<p><strong>常见块级元素：</strong></p>
<ul>
<li>address - 地址<br>blockquote - 块引用<br>center - 举中对齐块<br>dir - 目录列表<br>div - 常用块级容易，也是css layout的主要标签<br>dl - 定义列表<br>fieldset - form控制组<br>form - 交互表单<br>h1 - 大标题<br>h2 - 副标题<br>h3 - 3级标题<br>h4 - 4级标题<br>h5 - 5级标题<br>h6 - 6级标题<br>hr - 水平分隔线<br>isindex - input prompt<br>menu - 菜单列表<br>noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）<br>noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）<br>ol - 排序列表<br>p - 段落<br>pre - 格式化文本<br>table - 表格<br>ul - 非排序列表</li>
</ul>
<p>2.<code>inline</code>内联元素！<br>不可设置宽高<br>可与其他元素同处一行<br>只能容纳内联元素<br>不支持设置上下内、外边距，可设置左右内、外边距。<br>内联元素间有<strong>空格</strong>，就像文字间隙！<br><img src="./1509711818527.png" alt="Alt text"></p>
<p>如上，设置内边距时，元素内容位置不变，内边距会上下撑开，从而覆盖在其他元素上。</p>
<p><strong>常见内联元素：</strong></p>
<ul>
<li>a - 锚点<br>abbr - 缩写<br>acronym - 首字<br>b - 粗体（不推荐）<br>bdo - bidi override<br>big - 大字体<br>br - 换行<br>cite - 引用<br>code - 计算机代码（在引用源码的时候需要）<br>dfn - 定义字段<br>em - 强调<br>font - 字体设定（不推荐）<br>i - 斜体<br>img - 图片<br>input - 输入框<br>kbd - 定义键盘文本<br>label - 表格标签<br>q - 短引用<br>s - 中划线（不推荐）<br>samp - 定义范例计算机代码<br>select - 项目选择<br>small - 小字体文本<br>span - 常用内联容器，定义文本内区块<br>strike - 中划线<br>strong - 粗体强调<br>sub - 下标<br>sup - 上标<br>textarea - 多行文本输入框<br>tt - 电传文本<br>u - 下划线<br>var - 定义变量</li>
</ul>
<p>★★★★<br>其中：<code>img</code>较为特殊。img元素作为替换元素，有着类似于Inline-block的行为！</p>
<ol>
<li>可以设置width/height;</li>
<li>默认的，img元素在屏幕占据的空间与其图片的实际像素一致</li>
<li>如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是<code>&lt;a&gt;</code>里面包含的<code>&lt;img&gt;</code></li>
<li>可以通过<code>text-alin：center</code>实现居中！</li>
</ol>
<p>3.<code>inline-block</code>行内块级元素<br>兼具块级元素与内联元素的特性</p>
<hr>
<ul>
<li><strong>行内块级元素特性：</strong><br>※ <code>margin：0 auto</code>只对块级元素有效！<br>且<code>IE6、IE7</code>不支持！<br>※ <code>text-align</code>文字对齐方式<br>1.<code>left</code><br>2.<code>center</code><br>3.<code>right</code><br>※<strong>行内块级元素作为文字解析</strong>，因此可以通过<code>text-align：center</code>来实现<strong>居中对齐</strong>。</li>
</ul>
<hr>
<ul>
<li>外边距合并：<br>当块级元素的外边距相遇时会发生合并，合并后的共同外边距以较大者为准。<br>1.同级块级元素合并：<br>合并后以较大者作为两者间距！<br>2.父子块级元素合并：<br>合并后以较大者作为此方向公共外边距。</li>
</ul>
<ul>
<li>解决边距合并方法：<br>改变元素类型，使其不为块级元素。<br>或者在元素间插入文字等其他元素。</li>
</ul>
<hr>
<p>★★★★</p>
<ul>
<li><code>p</code>标签不能包<code>p</code>标签和块级元素。</li>
<li><code>a</code>标签不能包<code>a</code>标签。可以包裹其它。<ul>
<li>但是<code>a</code>标签无法完美包裹<strong>行内块级元素</strong>和<strong>块级元素</strong>，但是页面中常用这种包裹。因为这样做可以使整个div都可以点击访问，用户体验较好。</li>
</ul>
</li>
</ul>
<hr>
<p>★★★★</p>
<ul>
<li>垂直对齐方式<code>vertical-align</code><ul>
<li><strong>只对行内或者行内块有效！</strong></li>
<li>基线表示： <img src="./1509881745425.png" alt="Alt text"></li>
<li><code>行内元素</code>和<code>行内块元素</code>对齐方式！<br>1.行内块没有文字的时候，块底端默认以父级的基线（<code>baseline</code>）对齐！</li>
<li><img src="./1509881680352.png" alt="Alt text"><br>2.行内块有文字的时候，默认块的基线与父元素的基线对齐。<ul>
<li><img src="./1509889324956.png" alt="Alt text"></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>其他对齐方式：<ul>
<li><code>top</code>  元素的顶端与父元素行高（<strong>不是高度</strong>）的顶端对齐</li>
<li><code>bottom</code>    元素的底端与父元素行高底端对齐</li>
<li><code>middle</code>    元素的中线与父元素行高中线对齐</li>
<li><code>text-top</code>元素的顶端与父元素中文字顶线对齐</li>
<li><img src="./1509890321829.png" alt="Alt text"></li>
<li><code>text-bottom</code>元素的底端与父元素中文字底线对齐</li>
<li><img src="./1509890293480.png" alt="Alt text"></li>
<li><strong>文字对齐受行高影响，不受父元素盒子大小影响，行高若超过父盒子大小，内容则会溢出。</strong> </li>
<li><strong>行高有继承效果！</strong></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li><strong>HTML5 规范声明：应该使用 <code>&lt;h1&gt; - &lt;h6&gt;</code> 来表示标题，使用 <code>&lt;em&gt;</code> 标签来表示强调的文本，应该使用 <code>&lt;strong&gt;</code> 标签来表示重要文本，应该使用 <code>&lt;mark&gt;</code> 标签来表示标注的/突出显示的文本。</strong></li>
</ul>
<hr>
<p>2017.11.16</p>
<ul>
<li>鼠标指针<ol>
<li><code>cursor</code> 鼠标样式指针<ul>
<li><code>pointer</code>   手型</li>
<li><code>move</code>     可移动指针</li>
<li><code>text</code>  光标指示文本</li>
<li><code>wait</code>       加载中</li>
<li><code>help</code>        帮助</li>
</ul>
</li>
<li>自定义指针<ul>
<li><code>cursor：url（图片路径），pointer</code></li>
</ul>
</li>
</ol>
</li>
<li>透明度<ul>
<li><code>opacity</code>：整个盒子（包括其子元素）透明度变化 0-1。</li>
<li><code>background-color：rgb（255,0,0,0.5</code>：最后一项只控制背景颜色的透明度。 </li>
<li>rgb<strong>是css3的属性，IE一般不兼容</strong></li>
<li>background-color<strong>在低版本的IE中不兼容</strong></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li>伪类选择器<ul>
<li><code>.box：hover</code></li>
</ul>
</li>
</ul>
<hr>
<p>2017.11.17</p>
<ul>
<li><p>字体</p>
<ul>
<li><p><code>font-family</code>字体样式，包括<strong>微软雅黑，宋体，楷体等常见字体群</strong></p>
</li>
<li><p><code>font-size</code>字体大小</p>
</li>
</ul>
<ol>
<li><p><strong>PS:</strong>一般浏览器默认样式为<code>16px</code>，火狐浏览器支持<code>12px</code>以下的字体大小，其他浏览器不支持<code>12px</code>以下的字体大小。</p>
</li>
<li><p><code>em</code>做文字大小单位时，以父元素的文字大小为参考基准单位。</p>
</li>
<li><code>em</code>做宽高时，以当前元素的字体大小做基准。</li>
<li>eg：浏览器默认字体大小<code>16px</code>，<code>font-size：2em</code>则字体大小为<code>32px</code>。<code>width：10em</code>则元素宽度为<code>320px</code>。</li>
<li><code>rem</code>：以根标签<code>html</code>的字体大小作为基准。多用于移动端！</li>
</ol>
<ul>
<li><code>font-weight</code> 字体粗细<ol>
<li>取值：<code>100-900</code>或者<code>normal、bold</code></li>
</ol>
</li>
<li><code>font-style</code>字体风格。<ol>
<li><code>italic</code>字体倾斜  </li>
<li><code>oblique</code>强制倾斜</li>
<li><code>normal</code>正常显示</li>
</ol>
</li>
</ul>
</li>
</ul>
<p>★★</p>
<ul>
<li><code>font-wariant</code>字体大小写<ul>
<li><code>small-caps</code>小写字母大写。</li>
</ul>
</li>
</ul>
<p>★★★★</p>
<ul>
<li><strong>font的所有属性都会被继承</strong> </li>
<li><strong>复合样式</strong>：<ul>
<li><img src="./1510887976987.png" alt="Alt text"><br><br></li>
<li><img src="./1510887886252.png" alt="Alt text"></li>
</ul>
</li>
</ul>
<hr>
<p>★★★★</p>
<ul>
<li><p><code>text</code> 文本</p>
<ul>
<li><code>text-transform</code>本文字母大小写<ol>
<li><code>uppercase</code>小写字母大写</li>
<li><code>lowercase</code>大写字母小写</li>
<li><code>capitalize</code>单词首字母大写<ul>
<li><code>text-align</code>文本水平对齐方式</li>
</ul>
</li>
<li><code>right</code></li>
<li><code>left</code></li>
<li><code>center</code> </li>
<li><code>行内元素无法使用！</code><ul>
<li><code>text-indent</code>文本段落缩进</li>
</ul>
<ol>
<li><code>px</code></li>
<li><code>em</code></li>
<li><code>行内元素无法使用！</code></li>
</ol>
</li>
</ol>
</li>
<li><code>text-decoration</code>本文修饰方式<ol>
<li><code>underline</code>下划线</li>
<li><code>line-through</code>删除线</li>
<li><code>overline</code></li>
</ol>
</li>
<li><code>letter-spacing</code>字符间距  单位：<code>px</code></li>
<li><code>word-spacing</code>单词间距  单位：<code>px</code></li>
<li><code>white-space</code>换行方式<pre><code>1. `normal`默认方式
2. `nowrap`不换行
</code></pre></li>
<li><p><code>word-break</code>css3中换行方式</p>
<pre><code>1. `normal`默认方式
2. `break-all`空间不足时，会拆分完整单词来换行。
3. `keep-all`空间不足，不会拆分单词，而是将其整体换到下一行。
4.  `行内元素无法使用！`
</code></pre></li>
<li><p><code>text-overflow</code>文本超出设置</p>
<pre><code>1. `clip`         文本超出
2. `ellipsis`   文本超出省略处理
3. 配合`overflow：hidden`使用，且`行内元素无法使用！` 
</code></pre></li>
<li><img src="./1510902478833.png" alt="Alt text"></li>
</ul>
</li>
</ul>
<hr>
<ul>
<li>特殊字符<ul>
<li>浏览器会将多个空格当做一个空格处理。</li>
<li><code>&amp;nbsp；</code>  空格占位符，一个代表一个空格。</li>
<li><code>&amp;lt；</code>小于符号</li>
<li><code>&amp;gt；</code>大于符号</li>
<li><code>&amp;copy；</code>版权符号</li>
<li><code>reg；</code> 注册商标</li>
</ul>
</li>
</ul>
<hr>
<p>2017.11.18</p>
<p>####高级选择器及a伪类</p>
<p><strong>一、初级选择器</strong></p>
<ul>
<li>后代选择器</li>
<li>群组选择器<br>★★★★</li>
<li>子元素选择器：如<code>div &gt; p</code>直系父子才行。<br>★★★★</li>
<li><p>兄弟选择器：如：<code>div + div</code> 表示div的兄弟div元素。样式只加给<strong>相邻的</strong>兄弟，兄弟间不能有任何其他标签！且样式对元素自身无效，即<strong>自身不变！！！</strong>  。</p>
<p>★★★★<br><strong>一、属性选择器</strong><br>：元素拥有的任何<strong>属性（包括自定义属性）</strong>都可以作为选择的依据。</p>
<pre><code>1. 如： `[class]`表示选中有class属性的元素
</code></pre><p>或<code>[class=&quot;text&quot;]</code>表示选中有class属性，且属性值唯一为text的元素。<br>或<code>[class=&quot;text-top&quot;]</code>表示选中有class属性，且值唯一为text-top的元素。<br>总结：<strong>可以灵活限定选择范围。</strong></p>
<pre><code>2. 如：`class ~=&quot;nav&quot;` ，表示选中具备`class属性`，且有一个（可有多个）为`nav`的值的元素。
3. 如：`[class |=&quot;nav&quot;]`,表示选中具备class属性，且有以nav或者nav-开头的值的元素。
4. **组合使用**：如
    - `[href][titile=&quot;name&quot;]`表示选中具有href属性，且title属性值唯一为name的元素。
</code></pre></li>
</ul>
<p><strong>二、伪类选择器</strong></p>
<ul>
<li><code>a:hover</code>鼠标悬停触发事件</li>
<li><code>a：link</code>匹配所有没有被点击过的链接</li>
<li><code>a：visited</code>匹配所有被点击过的链接</li>
<li><code>a：active</code>匹配正在点击触发的链接</li>
<li><strong>同理其他元素也可以应用以上伪类</strong></li>
<li>★★当<code>a:hover</code>和<code>a：active</code>同时存在的时候，顺序不能颠倒，否则active样式不生效。</li>
</ul>
<p><strong>三、伪元素选择器</strong></p>
<ul>
<li><code>p：after</code>添加新元素到目标元素后面，默认生成的是<strong>行内元素</strong>。<br>如：<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">元素！</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;p&gt;原来&lt;/p&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line"></span><br><span class="line">样式！</span><br><span class="line">&lt;style&gt;</span><br><span class="line">p&#123;</span><br><span class="line">    font-size:30px; </span><br><span class="line">    background-color: orange;</span><br><span class="line">&#125;</span><br><span class="line">p:after&#123;</span><br><span class="line">    content:&quot;新增&quot;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>结果如图：<img src="./1511101115990.png" alt="Alt text"></p>
<ul>
<li><code>p：before</code>添加新元素到目标元素前面，默认是<strong>行内元素</strong>。</li>
</ul>
<p>####四、应用和优先级讨论</p>
<ul>
<li>单个选择器优先级<br> <strong>ID选择器&gt;类选择器&gt;标签选择器&gt;通配符选择器</strong> </li>
<li>组合选择器优先级<strong>计算</strong><pre><code>★★★★
我们把CSS的特殊性分为4个等级，每个等级代表一类选择器。每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
</code></pre>  <strong>4个等级的定义如下：</strong><ul>
<li>第一等：代表内联样式，如: style=””，权值为1000。</li>
<li>第二等：代表ID选择器，如：#content，权值为100。</li>
<li>第三等：代表类，伪类和属性选择器，如.content，权值为10。</li>
<li>第四等：代表类型选择器和伪元素选择器，如div p，权值为1。<br><strong>权重一样时后者覆盖前者</strong></li>
</ul>
</li>
</ul>
<hr>
<p>2017.11.20</p>
<p>####样式优先级<br>行内样式&gt;内部样式&gt;外部引入样式  <code>!important</code>强行提升重要性至最高</p>
<p>1<code>@import url(&quot;相对路径&quot;)</code>，需要顶格写在style中，只能引入CSS文件。<br>引入顺序：</p>
<ul>
<li><code>link</code>引入的css会在页面加载时同步加载。</li>
<li><code>import</code>引入的css在页面加载完才能加载。<br>####css3</li>
<li><p>圆角<code>border-radius</code></p>
<ol>
<li>四个值时，分别对应四个角；</li>
<li>三个值时，分别表示左上，右上左下，右下；</li>
<li>两个值时，分别表示左上右下，右上左下；</li>
<li>一个值时，表示四个角</li>
<li>实现圆形 <img src="./1511173588921.png" alt="Alt text"></li>
</ol>
</li>
<li><p>阴影<code>box-shadow</code></p>
<ol>
<li>有五类值<img src="./1511173978654.png" alt="Alt text"></li>
<li>阴影可以堆叠<img src="./1511174671356.png" alt="Alt text"><br>★★★★<ul>
<li><code>overflow：hidden</code>溢出隐藏</li>
<li><code>overflow-y：hidden</code>单方向溢出隐藏</li>
</ul>
</li>
</ol>
</li>
</ul>
<hr>
<p>2017.11.21</p>
<p>####浮动float<br>★★★★</p>
<ul>
<li>浮动元素会脱离文档流，不占空间；默认会覆盖在普通DOM元素上。</li>
<li>浮动会造成父级的盒子塌陷</li>
<li>浮动最初运用是为了实现<strong>文字环绕</strong></li>
<li>浮动会挤压文本格式的内容（包括文字，行内元素，行内块级元素）</li>
<li>父级规定宽高之后，尽管浮动脱离了文档流，但内容不够依旧会掉下去。</li>
<li>浮动只会在父元素内部浮动，不会脱离父级限定的宽高范围。</li>
<li>浮动会让元素变为块级元素。</li>
<li>浮动排列原则：<ul>
<li>后一个只会被紧挨的前一个影响，空间够则紧挨排列在后，不够空间，会以前一个盒子的高度为基准换到下一行。</li>
<li><img src="./1511271243903.png" alt="Alt text"><br>红色盒子卡住了黑色盒子，在空间不够时，会掉到下一行，<strong>但不会填补空缺，而是以红色盒子高度为基准</strong>。<ul>
<li><img src="./1511271379599.png" alt="Alt text">对比可知，<strong>浮动排列规则</strong>。</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>★★★★★</p>
<p>####清除浮动：清除浮动造成的父级元素塌陷</p>
<ul>
<li><p><code>clear</code>，三个值:left,right,both.</p>
<ul>
<li><img src="./1511266569353.png" alt="Alt text"><br>一般是通过<strong>创建一个新的同级的元素盒子</strong>，给他的css添加clear属性，来清除它前面同级元素的浮动。</li>
</ul>
</li>
<li><p>伪元素法：通过after添加的dom元素，不在页面dom树种，是<strong>主流的清除浮动方法</strong>，原理同第一种。</p>
<ul>
<li>具体实现方法如图：<img src="./1511267515655.png" alt="Alt text"></li>
</ul>
</li>
</ul>
<p>★★★★★</p>
<p>####最小宽度和最大宽度</p>
<ul>
<li><p><code>min-width</code>:<strong>用像素设定大小时，常限定最小宽度，防止盒子变形。</strong></p>
<ul>
<li>此时，浏览器窗口继续变小之后，元素不会变形。即小于这个宽度后，盒子不会再被挤压变小，而是被遮盖。</li>
</ul>
</li>
<li><p><code>max-width</code>:<strong>百分比设定大小时，常限定最大宽度，防止盒子变形。</strong><br>   -此时，浏览器窗口继续变大后，元素盒子不会再拉长。即大于这个宽度后，盒子宽度不再增加。<br>####定位</p>
</li>
<li><p><code>position</code>定位</p>
<ol>
<li><code>static</code>默认，没变化</li>
<li><code>relative</code>相对定位<pre><code>- 相对定位半脱离文档流，相对原来位置移动，子元素也会随着元素一起移动。
- 但是不会造成盒子塌陷，即在父级中原来的空间占位不会消失。
- 相对定位不会改变元素类型
</code></pre></li>
<li><code>absolute</code>绝对定位<pre><code>- 绝对定位完全脱离文档流，相对有定位属性的父级元素移动，如果没有，则参考body移动。
- 会造成盒子塌陷，在父级中的空间占位消失。
- 绝对定位会改变元素类型为**块级**
- `margin：auto`失效
</code></pre></li>
<li><code>fixed</code>固定定位<ul>
<li>相对浏览器窗口定位，不会移动</li>
</ul>
</li>
</ol>
</li>
<li><p><code>z-index</code>层级</p>
<ol>
<li>绝对定位层级&gt;相对定位（<strong>给出位移值的</strong>）层级&gt;浮动元素层级&gt;普通元素层级（<strong>没给位移值的相对定位层级</strong>）</li>
<li>默认层级都是0</li>
<li>层级都是相对的，在父级内部，同级元素进行比较。</li>
<li>不同级（辈分）的元素不能比较层级。</li>
</ol>
</li>
</ul>
<hr>
<p>2017.11.23</p>
<p>####表单<code>form</code></p>
<ul>
<li><code>action</code>属性：标识表单提交的地址。</li>
<li><code>method</code>属性，表单数据的提交方式。<ol>
<li><code>get</code>方法</li>
<li><code>post</code>方法 </li>
</ol>
</li>
<li><code>input</code>元素：输入框。<ol>
<li><code>type</code>类型属性： text （文本框） ，password（密码框），radio（单选框），checkbox（复选框），button（普通按钮），file（文件上传）<strong>可限定文件类型</strong>！！<pre><code>- 复选框![Alt text](./1511432806144.png)
- 复选框中加上`checked`表示默认选中，`disabled`禁制使用。
- 普通按钮![Alt text](./1511432786801.png)
- 重置按钮![Alt text](./1511432902424.png)
- 提交按钮![Alt text](./1511433177191.png)
- 提交数据包括：name属性的关键字和value属性的值，两者组成的键值对。
</code></pre></li>
<li><code>lable</code>绑定文本到目标ID的选择框上。可实现<strong>文字点击选中效果</strong>！<pre><code>- ![Alt text](./1511432600393.png)
</code></pre></li>
<li><code>placeholder</code>框内提示信息</li>
</ol>
</li>
<li><code>selection</code>下拉选框<ol>
<li><code>option</code>下拉选项。加上<code>selected</code>则表示此项默认选中。</li>
</ol>
</li>
<li><code>textarea</code>文本区域 </li>
<li><code>fieldset</code>组合表单控件，是块级元素。<ol>
<li><code>legend</code>此表单区块的标题</li>
</ol>
</li>
<li></li>
<li><p>PS：<code>outline：none</code>去掉默认的焦点元素框，默认是蓝色。</p>
</li>
</ul>
<p>####focus伪类，常用于表单元素</p>
<ul>
<li>如：<img src="./1511442146588.png" alt="Alt text"><br><img src="./1511442186875.png" alt="Alt text"></li>
</ul>
<p>####表格<code>table</code></p>
<ul>
<li>表格的一般组成<img src="./1511443794429.png" alt="Alt text"><img src="./1511443884334.png" alt="Alt text"><br>包括<code>thead</code>，<code>tbody</code>，<code>tfoot</code>；</li>
<li><strong>表格具备对齐属性：即改变某一行或者某一列甚至某个格子时，其他元素会行列对齐次</strong>。</li>
<li><code>table</code>的<code>border</code>属性只对最外层加边框。</li>
<li><p><strong>单元格合并</strong></p>
<ol>
<li><code>colspan=？</code>不同列合并，值表示合并的个数，多的单元格会被挤压。</li>
<li><code>rowspan=？</code>不同行合并，值表示合并的个数，多的单元格会被挤压。</li>
</ol>
</li>
<li><p>单元格默认类型为<code>table-cell</code>，<code>td，tr，th</code>不支持<code>margin</code>属性，且有默认的<code>padding=1</code>。</p>
</li>
<li>边框间距<code>border-spacing</code>：<br>加给<code>table</code>标签，可以控制边框距离，默认两个值，分别控制<strong>x，y</strong>。</li>
<li>边框合并<code>border-collapse：collapse</code></li>
</ul>
<hr>
<p>2017.11.24</p>
<p>####<code>iframe</code>框架<br>iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。</p>
<ul>
<li><img src="./1511526913597.png" alt="Alt text"></li>
<li>通过对<code>a</code>标签的<code>target</code>属性绑定<code>iframe</code>的name值，可实现链接跳转的绑定，及对应显示。即点击a标签对应文字，框架内可显示京东的首页！</li>
</ul>
<p>####css继承总结</p>
<ul>
<li>默认继承的有：<code>color、font、text-align、text-indent、letter-spacing、word-spacing、list-style</code></li>
<li>a标签的颜色值不继承父级的<code>color</code>，有自己的默认颜色。</li>
<li>可以使用<code>inherit</code>来明确继承父级相应的属性值。<br>####css重用<br>通过给元素添加具有<strong>固定样式的类</strong>，达到样式的高效重复使用的目的。<br>★★★★★<br><strong>选项卡图标！！！</strong></li>
<li>用法如下：<img src="./1511529464616.png" alt="Alt text"><br>####css书写顺序</li>
</ul>
<p>第一位：关乎元素类型的</p>
<ol>
<li>display</li>
<li>positon</li>
<li>float<br>第二位：元素自身的特性属性<ol>
<li>width</li>
<li>height</li>
<li>border</li>
<li>margin</li>
<li>padding<br>第三位：其他属性</li>
<li>text</li>
<li>font</li>
<li>background<br>第四位：css3的属性</li>
</ol>
</li>
</ol>
<p>####浏览器前缀<br>谷歌：<code>-webkit-</code><br>火狐：<code>-moz-</code><br>欧朋：<code>-o-</code><br>IE：<code>-ms-</code></p>
<p>####<code>swiper</code>轮播插件</p>
<p>####阿里图标<br>是一种字体图标，不会因为放大缩小而模糊。<br>一、单色图标<br>兼容IE8+以上所有现代浏览器。<br>不支持彩色图标！<br>但可以通过CSS进行后期修改。<br><strong>通过引入css文件，给i标签加特定的类名实现</strong><br>二、多色图标<br>性能较差，兼容性较差，不推荐使用。<code>通过引入JS文件，些svg代码块实现</code></p>
<hr>
<p>@(培训)[标签1, 标签2, 标签3]</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/html/" rel="tag"># -html</a>
          
        </div>
      

      
      
      

      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">陈乾</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">1</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">1</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">1</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">陈乾</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
